<template>
  <view class="free-deposit-record">
    <ve-card
      :title="item.operateTypeName"
      :subTitle="item.createTime"
      :customSubStyle="{ color: '#191C27' }"
      type="blue"
      v-for="(item, index) in list"
      :key="index"
    >
      <ve-cell label="流水单号">{{ item.orderPayCode }}</ve-cell>
      <ve-cell label="变动金额">
        <!-- 如果是押金抵扣类型导致的变动，需要可点击 -->
        <view v-if="item.operateType == 2" class="amount-link" @click="onAmountClick(item)">
          <text>{{ `${item.changeDepositAmount < 0 ? item.changeDepositAmount : `+${item.changeDepositAmount}`} 元` }}</text>
          <ve-icon name="arrow_right_0" />
        </view>
        <view v-else>
          {{ `${item.changeDepositAmount <= 0 ? item.changeDepositAmount : `+${item.changeDepositAmount}`} 元` }}
        </view>
      </ve-cell>
      <ve-cell-price label="变动后冻结金额" :value="item.currentlyAvailableDepositAmount" />
      <ve-cell label="状态">
        <!-- 1：请求中 2：成功 3：失败 -->
        <view
          :class="{
            'status-1': item.status == 1,
            'status-2': item.status == 2,
            'status-3': item.status == 3,
          }"
          >{{ item.statusName }}</view
        >
      </ve-cell>
      <ve-cell label="关联订单号">{{ item.orderCode || '-' }}</ve-cell>
      <ve-cell label="关联违章">{{ item.violationCode || '-' }}</ve-cell>
      <ve-cell label="备注">
        <remark :text="item.remark" />
      </ve-cell>
      <ve-cell label="操作人">{{ item.createUserName || '-' }}</ve-cell>
    </ve-card>
  </view>
</template>

<script setup>
  import remark from './remark.vue'

  const props = defineProps({
    orderId: {
      type: [String, Number],
    },
    list: {
      type: Array,
    },
  })
  const onAmountClick = (item) => {
    uni.navigateTo({
      url: `/pages/order/short-order/free-deposit-deduction-detail?id=${item.id}`,
    })
  }
</script>

<style lang="less" scoped>
  .status-1 {
    color: #ff7d00;
  }
  .status-2 {
    color: #00b42a;
  }
  .status-3 {
    color: #f53f3f;
  }

  .amount-link {
    font-size: 30rpx;
    color: #3072f6;
    display: flex;
    align-items: center;
    text {
      margin-right: 10rpx;
    }
  }
</style>
